<template>
    <div>
        <!-- <h1>土地信息录入</h1> -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>土地</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息录入</el-breadcrumb-item>
        </el-breadcrumb>

    <el-card>
        <el-form ref="landFormRefs" :model="landViewDto" :rules="landFormRules" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-col :span="22" :offset="1">
                        <p>基本信息</p>
                        <el-form-item label="土地名称" prop="landName">
                            <el-input  v-model="landViewDto.landName" style="width:60%" placeholder="请输入土地名称"></el-input>
                        </el-form-item>
                        <el-form-item label="土地证号" prop="landId">
                            <el-input  v-model="landViewDto.landId" style="width:60%" placeholder="请输入土地证号"></el-input>
                        </el-form-item>
                        <el-form-item label="土地性质" prop="landType">
                            <el-select placeholder="请选择土地性质" style="width:60%" v-model="landViewDto.landType">
                                <el-option label="公共土地" value="公共土地"></el-option>
                                <el-option label="绿化土地" value="绿化土地"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="土地面积" prop="landArea">
                                <el-input  v-model="landViewDto.landArea" style="width:60%" placeholder="请输入土地面积"></el-input>
                        </el-form-item>
                        <el-form-item label="土地价值" prop="landVal">
                                <el-input  v-model="landViewDto.landVal" style="width:60%" placeholder="请输入土地价值"></el-input>
                        </el-form-item>
                        <el-form-item label="获得方式" prop="landGet">
                                <el-select placeholder="请选择获得方式" style="width:60%" v-model="landViewDto.landGet">
                                    <el-option label="捐赠" value="捐赠"></el-option>
                                    <el-option label="购买" value="购买"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="获得时间" prop="land_get_time">
                                <el-date-picker type="date" placeholder="选择日期"  style="width: 60%;" v-model="landViewDto.land_get_time"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="土地位置" prop="landLocation">
                            <el-input v-model="landViewDto.landLocation" placeholder="请输入土地位置" style="width: 60%;"></el-input>
                                <!-- <el-cascader style="width:60%" v-model="landViewDto.landLocation" :options="landList" ></el-cascader> -->
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-col :span="12">
                    <el-col :span="20" :offset="1">
                        <p>附件信息</p>
                         <span>土地地籍图纸、权属证书、照片</span>
                        <el-divider></el-divider>
                        
                        <el-form-item label="照片" prop="landImage">
                            <el-input  v-model="landViewDto.landImage" style="width:60%" placeholder="请输入土地照片"></el-input>
                        </el-form-item>
                        <el-form-item label="证明书" prop="landCertificate">
                            <el-input  v-model="landViewDto.landCertificate" style="width:60%" placeholder="请输入土地照片"></el-input>
                        </el-form-item>
                        <el-form-item label="地图" prop="landMap">
                            <el-input  v-model="landViewDto.landMap" style="width:60%" placeholder="请输入土地照片"></el-input>
                        </el-form-item>
                        
                        <!-- <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                            <el-button size="small" type="primary">上传图片</el-button>
                            <div slot="tip" class="el-upload__tip" >支持jpeg、png格式上传</div>
                        </el-upload> -->
                        <!-- <el-divider></el-divider> -->
                        
                        <!-- <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                            <el-button size="small" type="primary">上传文件</el-button>
                            <div slot="tip" class="el-upload__tip" >支持word、pdf格式上传</div>
                        </el-upload> -->
                        <p>其他信息</p>
                        
                            <el-form-item label="附着物" prop="landOnInfo">
                                <el-input  v-model="landViewDto.landOnInfo" style="width:60%" placeholder="请输入土地地上附着物"></el-input>
                            </el-form-item>
                            <el-form-item label="地下设施" prop="landDownInfo">
                                <el-input  v-model="landViewDto.landDownInfo" style="width:60%" placeholder="请输入地下设施"></el-input>
                            </el-form-item>
                            <el-form-item label="其他" prop="landOtherInfo">
                                <el-input  v-model="landViewDto.landOtherInfo" style="width:60%" placeholder="请输入其他备注"></el-input>
                            </el-form-item>
                            
                            <el-form-item>
                                <el-button type="info" @click="resetBaseLandForm">重置</el-button>
                                <el-button type="primary" @click="submit">提交</el-button>
                            </el-form-item>
                    </el-col>
                </el-col>
            </el-row>
        </el-form>     
    </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 表单
            landViewDto:{
                // attachmentId: 0,
                // // facilityId: 0,
                // landArea: "",  //土地面积
                // landCertificate: "", //土地证明书
                // landDownInfo: "", //地下设施附着物信息
                // landGet: "", //获得方式 
                // landId: "", //土地证号
                // landImage: "", //土地图片
                // landLocation: "", //土地位置
                // landMap: "", //土地地图
                // landName: "", //土地名称
                // landOnInfo: "", //土地地上附着物
                // landOtherInfo: "", //其他
                // landType: "", //土地类型
                // landVal: "",  //土地价值
                // land_get_time: "" ,  //获得时间
                // otherId: 0,
                // username: '709401953'
                
                landArea: '',
                landDownInfo: "",
                landGet: "",
                landId: "",
                landLocation: "",
                landName: "",
                landOnInfo: "",
                landOtherInfo: "",
                landType: "",
                landVal: '',
                username: "709401953"
                
            },
            formData:{},
            // 级联选择器的数据
            landList:[],
            // 表单验证规则
            landFormRules:{
                landName:[
                    {required:true,message:"请输入土地名称",trigger:"blur"} 
                ],
                landId:[
                    {required: true, message:'请输入土地证号', trigger: 'blur'}
                ]
            }
        }
    },
    created(){},
    methods:{
        
        // 重置表单
        resetBaseLandForm(){
            // 表单的引用对象 ref="landFormRef"  this指向这个实例对象
            this.$refs.landFormRefs.resetFields();
        },
        
        // 提交表单信息
        async submit(){
            await this.$http.post('landView', this.landViewDto).then(res=>{
                // console.log(res);
                 if(res.data.code !==1){
                    return this.$message.error('插入数据失败！');
                }   
                this.resetBaseLandForm();
                return this.$message.success('添加成功！');
            }).catch((err)=>{
                console.log(err);
            });
        }
    }
}
</script>
<style scoped>
P{  
	font-family: Adobe Heiti Std;
	font-size: 15px;
    font-weight: bolder;
	color: #4994fb;
}
</style>
